<template>
    <div>
        {{ count }}
        <button @click="increment">increment</button>
    </div>
</template>

<script>
/**
 * 3、setup函数的问题：
    * 导出默认配置选项
    * 声明setup函数
    * 返回模版中需要使用的数据
    * 
    * 解决方案：setup 语法糖
 */

/**
 * 2、组合式API
    * 所有逻辑 在 setup 函数中，使用 ref、watch 等函数组织代码
 */
export default {
    /**
     * setup 函数：vue3特有的选项，作为组合式API的起点
        * 组合式API中setup函数，会在所有选项式API钩子之前调用
        * 函数中 this 不是组件实例，是 undefined
        * 如果数据要在 template 中使用，需要在 setup 中返回
     */
    beforeCreate() {
        console.log('beforeCreate')
    },
    setup() {
        console.log('setup', this)
        // 定义变量和方法
        let count = 1
        const increment = () => {
            count++
        }
        // 如果要在 template 中使用，需要在 setup 中返回
        return { count, increment }
    }
    /**
     * 总结：在今后的vue3项目中，几乎用不到this，所有的数据都是通过函数来获取
     */
}

/**
 * 1、选项式API
    * 数据放在 data 中，方法放在 methods 中
 */
// export default {
//     data() {
//         return {
//             count: 1
//         }
//     },
//     methods: {
//         increment() {
//             this.count++
//         }
//     }
// }
</script>

<style lang="scss" scoped></style>